<template>
  <div>
    <TypeNav />
    <div class="main">
      <div class="py-container">
        <!--bread-->
        <div class="bread">
          <ul class="fl sui-breadcrumb">
            <li>
              <a href="#">全部结果</a>
            </li>
          </ul>
          <ul class="fl sui-tag">
            <li class="with-x" v-if="options.categoryName">
              {{options.categoryName}}<i @click="removeCategoryName">×</i>
            </li>
            <li class="with-x" v-if="options.keyword">
                {{options.keyword}}<i @click="removeKeyword">×</i>
            </li>
            <li class="with-x" v-if="options.trademark">
              {{options.trademark}}<i @click="removeTrademark">×</i>
            </li>
            <li class="with-x" v-for="(prop,index) in options.props">
              {{prop}}<i @click="removeProp(index)">×</i>
            </li>
          </ul>
        </div>

        <!--selector-->
        <!--<SearchSelector @trademark="trademark" @props="props" />-->
        <SearchSelector :trademarkFn="trademark" :propsFn="props" />

        <!--details-->
        <div class="details clearfix">
          <div class="sui-navbar">
            <div class="navbar-inner filter">
              <ul class="sui-nav">
                <li :class="{active:isActive('1')}" @click="order('1')">
                  <a href="javascript:;">
                    综合
                    <i v-if="isActive('1')" class="iconfont"
                       :class="orderClass"></i>
                  </a>
                </li>
                <li>
                  <a href="#">销量</a>
                </li>
                <li>
                  <a href="#">新品</a>
                </li>
                <li>
                  <a href="#">评价</a>
                </li>
                <li :class="{active:isActive('2')}" @click="order('2')">
                  <a href="javascript:;">
                    价格
                    <i v-if="isActive('2')" class="iconfont"
                       :class="orderClass"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="goods-list">
            <ul class="yui3-g">
              <!--每一个商品-->
              <li class="yui3-u-1-5" v-for="good in goods.goodsList" :key="good.id">
                <div class="list-wrap">
                  <div class="p-img">
                    <router-link :to="`/Detail/${good.id}`">
                      <!--<img :src="good.defaultImg" />-->
                      <img v-lazy="good.defaultImg" />
                    </router-link>
                  </div>
                  <div class="price">
                    <strong>
                      <em>¥ </em>
                      <i>{{good.price}}</i>
                    </strong>
                  </div>
                  <div class="attr">
                    <a  href="javascript:;">{{good.title}}</a>
                  </div>
                  <div class="commit">
                    <i class="command">已有<span>2000</span>人评价</i>
                  </div>
                  <div class="operate">
                    <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                    <a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <!--分页组件-->
          <Pagination class="pagination"  :lxyms="5"
                      @changeCurrentPage="getGoods_changechange"
                      :total="goods.total" :pageSize="options.pageSize"
                      :currentPageFromWrap="options.pageNo" ></Pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import SearchSelector from './SearchSelector/SearchSelector'
  import TypeNav from 'components/TypeNav'
  import {mapActions,mapState} from "vuex"
  export default {
    name: 'Search',
    props:["keyword","categoryName","category1Id","category2Id","category3Id"],
    data(){
       return {
           options:{
               pageNo:1,  //页码
               pageSize:20, //每一页的数量
               category1Id:"", //一级分类的id
               category2Id:"", //二级分类的id
               category3Id:"", //三级分类的id
               categoryName:"",//分类名称
               keyword:"", //搜索的关键字
               trademark:"",//品牌参数
               props:[], //存放商品属性列表的参数
               order:"2:desc"
           }
       }
    } ,
    computed:{
        ...mapState({
            goods:state => state.search.goods
        }),

        //控制该使用向上的箭头 还是 使用向下的箭头
        orderClass(){
          return this.options.order.split(':')[1]==='desc'?'icon-jiantou':'icon-jiantou-copy-copy'
        },
        //控制该选中哪一个排序按钮 & 控制上下箭头的显示与隐藏
        isActive(){
            return (flag)=>{
                //flag; 1:综合  2:价格
                return this.options.order.startsWith(flag)
            }
        }
    },
    methods:{
        ...mapActions(["getGoods"]),
        //当分页组件的页码按钮被点击时 会触发 第一个参数就是当前点击的页码
        /*changeCurrentchange(pageNo){
           this.options.pageNo = pageNo;  //修改参数
           this.getGoods(this.options)   //重新获取数据
        }*/

        //公共函数; 触发获取goods的action的 金额热会调用http方法发送请求的
        //当search组件初始化加载时会被调用;
        //当分页组件的页码按钮被点击时 也会被调用
        getGoods_changechange(pageNo=1){
            //当每一次调用getGoods_changechange,没有指定pageNo时;pageNo都要一个默认值为1
            //pageNo又作为props传递给了Pagination组件
            //当pageNo产生改变时;整个分页组件都会重新渲染
            this.options.pageNo = pageNo;
            this.getGoods(this.options)
        },
        //根据路由参数去修改查询参数
        updateOptions(){
            this.options = {
                ...this.options,
                keyword:this.keyword,
                category1Id:this.category1Id,
                category2Id:this.category2Id,
                category3Id:this.category3Id,
                categoryName:this.categoryName
            }
        },
        //删除categoryName对应的flag图标时 触发的方法;调整请求参数重新发请求
        removeCategoryName(){
            //剔除query参数
            //调整请求参数(查询参数)
            this.options.categoryName=""
            this.options.category1Id=""
            this.options.category2Id=""
            this.options.category3Id=""
            //重新发请求(查询参数)  不能直接转发action 进而去发请求
            // this.getGoods_changechange()
            // this.$route.path : 天生不带query! 带params!
            // 将直接发送请求改成往search组件进行跳转
            // serach组件 跳 search组件应该使用replace
            // this.$router.push(this.$route.path)
            this.$router.replace(this.$route.path)
        },
        //删除keyword对应的flag图标时 触发的方法;调整请求参数重新发请求
        removeKeyword(){
            //剔除parmas参数
            //调整请求参数
            this.options.keyword=""
            //重新发请求
            // this.getGoods_changechange()
            this.$router.replace({name:"Search",query:this.$route.query})
            //更新Header组件中searchVal的数据 清空搜索输入框
            this.$bus.$emit("updateSearchVal","")
        },
        //接收SearchSelector组件提供过来的数据 并修改options中的trademark
        trademark(obj){
            let trademark = `${obj.id}:${obj.name}`;
            if(trademark ===  this.options.trademark) retrun;
            this.options.trademark = trademark; //修改了请求参数
            this.getGoods_changechange()//发请求
        },
        //清除options中的trademark 并重新发请求
        removeTrademark(){
            this.options.trademark = "";
            this.getGoods_changechange()//发请求
        },
        //接收SearchSelector组件提供过来的数据 并修改options中的props
        props(obj){
            //修改了请求参数
            const {id,name,val} = obj;
            const prop = `${id}:${val}:${name}`;
            if(this.options.props.includes(prop)) return;
            this.options.props.push(prop)
            //发请求
            this.getGoods_changechange()
        },
        //从options中的props清除指定选项 并重新发请求
        removeProp(index){
            this.options.props.splice(index,1);
            this.getGoods_changechange()//发请求
        },
        //排序搜索
        order(flag){
            //flag; 1:综合  2:价格
            //拿到当前选中的按钮 chooseBtn
            //拿到当前选中的按钮的状态 orderType(升序 降序)
            let [chooseBtn,orderType] = this.options.order.split(":");

            if(flag === chooseBtn){
              //如果点击的是当前按钮 则控制升降序
                orderType = (orderType === "asc" ? "desc" : "asc")
            }else{
              //如果点击的是一个新的按钮 则默认降序
              chooseBtn =   flag;
              orderType = "desc"
            }

            //我们只需要准备数据 整个排序逻辑再后台
            this.options.order = `${chooseBtn}:${orderType}`;
            //重新发请求
            this.getGoods_changechange()
        }
    },
    created(){
        //初始化显示第一页的数据
        //路由参数产生变化 我們要捕捉这些变化 进而让查询参数产生变化
        this.updateOptions()
        this.getGoods_changechange()
    },
    watch:{
      //当从serach组件跳转到serach组件时 路由参数产生变化 应该要重新发请求
      $route:{
          handler(){
              //路由参数产生变化 我們要捕捉这些变化 进而让查询参数产生变化
              this.updateOptions()
              this.getGoods_changechange()
          },
          deep:true
      }
    },
    components: {
      SearchSelector,
      TypeNav
    }
  }
</script>

<style lang="less" scoped>
  .main {
    margin: 10px 0;

    .py-container {
      width: 1200px;
      margin: 0 auto;

      .bread {
        margin-bottom: 5px;
        overflow: hidden;

        .sui-breadcrumb {
          padding: 3px 15px;
          margin: 0;
          font-weight: 400;
          border-radius: 3px;
          float: left;

          li {
            display: inline-block;
            line-height: 18px;

            a {
              color: #666;
              text-decoration: none;

              &:hover {
                color: #4cb9fc;
              }
            }
          }
        }

        .sui-tag {
          margin-top: -5px;
          list-style: none;
          font-size: 0;
          line-height: 0;
          padding: 5px 0 0;
          margin-bottom: 18px;
          float: left;

          .with-x {
            font-size: 12px;
            margin: 0 5px 5px 0;
            display: inline-block;
            overflow: hidden;
            color: #000;
            background: #f7f7f7;
            padding: 0 7px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #dedede;
            white-space: nowrap;
            transition: color 400ms;
            cursor: pointer;

            i {
              margin-left: 10px;
              cursor: pointer;
              font: 400 14px tahoma;
              display: inline-block;
              height: 100%;
              vertical-align: middle;
            }

            &:hover {
              color: #28a3ef;
            }
          }
        }
      }

      .details {
        margin-bottom: 5px;

        .sui-navbar {
          overflow: visible;
          margin-bottom: 0;

          .filter {
            min-height: 40px;
            padding-right: 20px;
            background: #fbfbfb;
            border: 1px solid #e2e2e2;
            padding-left: 0;
            border-radius: 0;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);

            .sui-nav {
              position: relative;
              left: 0;
              display: block;
              float: left;
              margin: 0 10px 0 0;

              li {
                float: left;
                line-height: 18px;

                a {
                  display: block;
                  cursor: pointer;
                  padding: 11px 15px;
                  color: #777;
                  text-decoration: none;
                }

                &.active {
                  a {
                    background: #e1251b;
                    color: #fff;
                  }
                }
              }
            }
          }
        }

        .goods-list {
          margin: 20px 0;

          ul {
            display: flex;
            flex-wrap: wrap;

            li {
              height: 100%;
              width: 20%;
              margin-top: 10px;
              line-height: 28px;

              .list-wrap {
                .p-img {
                  padding-left: 15px;
                  width: 215px;
                  height: 255px;

                  a {
                    color: #666;

                    img {
                      max-width: 100%;
                      height: auto;
                      vertical-align: middle;
                    }
                  }
                }

                .price {
                  padding-left: 15px;
                  font-size: 18px;
                  color: #c81623;

                  strong {
                    font-weight: 700;

                    i {
                      margin-left: -5px;
                    }
                  }
                }

                .attr {
                  padding-left: 15px;
                  width: 85%;
                  overflow: hidden;
                  margin-bottom: 8px;
                  min-height: 38px;
                  cursor: pointer;
                  line-height: 1.8;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;

                  a {
                    color: #333;
                    text-decoration: none;
                  }
                }

                .commit {
                  padding-left: 15px;
                  height: 22px;
                  font-size: 13px;
                  color: #a7a7a7;

                  span {
                    font-weight: 700;
                    color: #646fb0;
                  }
                }

                .operate {
                  padding: 12px 15px;

                  .sui-btn {
                    display: inline-block;
                    padding: 2px 14px;
                    box-sizing: border-box;
                    margin-bottom: 0;
                    font-size: 12px;
                    line-height: 18px;
                    text-align: center;
                    vertical-align: middle;
                    cursor: pointer;
                    border-radius: 0;
                    background-color: transparent;
                    margin-right: 15px;
                  }

                  .btn-bordered {
                    min-width: 85px;
                    background-color: transparent;
                    border: 1px solid #8c8c8c;
                    color: #8c8c8c;

                    &:hover {
                      border: 1px solid #666;
                      color: #fff !important;
                      background-color: #666;
                      text-decoration: none;
                    }
                  }

                  .btn-danger {
                    border: 1px solid #e1251b;
                    color: #e1251b;

                    &:hover {
                      border: 1px solid #e1251b;
                      background-color: #e1251b;
                      color: white !important;
                      text-decoration: none;
                    }
                  }
                }
              }
            }
          }
        }

        .pagination{
          position: relative;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
</style>